<template>
    <!-- 3d柱形统计图3 -->
    <!-- 用户位置泄露分析统计图 -->
    <div class="chart-container" ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: '',
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        this.initChart();
    },

    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartRef);
            // 柱状图的宽度，y是x的一半
            const offsetX = 20;
            const offsetY = 10;

            // 绘制左侧面
            const CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint;
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c3 = [xAxisPoint[0], xAxisPoint[1]];
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
                },
            });
            // 绘制右侧面
            const CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 绘制顶面
            const CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
                    const c3 = [shape.x, shape.y - offsetX];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // // 绘制底面
            const CubeBottom = echarts.graphic.extendShape({
                shape: {
                    x: 10,
                    y: 10,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 右点
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });

            // 注册图形
            echarts.graphic.registerShape('CubeLeft', CubeLeft);
            echarts.graphic.registerShape('CubeRight', CubeRight);
            echarts.graphic.registerShape('CubeTop', CubeTop);
            echarts.graphic.registerShape('CubeBottom', CubeBottom);
            const dataX = ['家庭位置泄露', '工作位置泄露', '无位置泄露'];
            const barData = [35, 26, 59];
            let colors = ['#3498ba', '#3c7cb7', '#46d8fa', '#4daefc', '#3ae3fd'];
            let option = {
                //你的代码
                // backgroundColor: "#000",
                color: ['#097dc0', '#26D6D7'],
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: 'rgb(41,188,245)',
                        },
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: 22,
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#233653',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: dataX,
                },
                yAxis: [
                    {
                        name: "泄露次数",
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 22,
                        },
                        min: 0,
                        max: 70,
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1160a0',
                                type: 'dashed',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#008de7',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 22,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '时长',
                        type: 'custom',
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: 0,
                                children: [
                                    {
                                        type: 'CubeLeft',
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colors[0],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colors[1],
                                                },
                                            ]),
                                            stroke: 'rgba(3, 25, 63, .1)', //边框颜色
                                        },
                                    },
                                    {
                                        type: 'CubeRight',
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colors[2],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colors[3],
                                                },
                                            ]),
                                            stroke: 'rgba(3, 25, 63, .1)', //边框颜色
                                        },
                                    },
                                    {
                                        type: 'CubeTop',
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },

                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colors[4],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colors[4],
                                                },
                                            ]),
                                            stroke: 'rgba(3, 25, 63, .1)', //边框颜色
                                        },
                                    },
                                ],
                            };
                        },
                        data: barData,
                    },
                    {
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: (e) => {
                                    return e.value;
                                },
                                fontSize: 22,
                                color: '#fff',
                                offset: [0, -25],
                            },
                        },
                        itemStyle: {
                            color: 'transparent',
                        },
                        tooltip: {},
                        data: barData,
                    },
                ],
            };
            this.chart.setOption(option);

            // 监听窗口大小变化，用于自适应  
        }
    }
};  
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 100%;
    /* background-color: #817979; */
}
</style>